<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="css/table.css"/>
</head>

<body>
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        <div class="layui-input-block" style="margin-left:0px;">
            <select id="sel_grade" class="layui-input" style="width:230px;display:block;float:left"
                    onchange="question_sel(this);">
                <option value="">请选择班级</option>
                <option th:each="item:${grade_list}"
                        th:value="${item.id}"
                        th:text="${item.grade_name}">
                </option>
            </select>
            <select id="sel_question" class="layui-input" style="width:230px;display:block;float:left;margin-left:5px;"
                    onchange="get_answers(this);">
                <option value="">请选择题库</option>
            </select>
        </div>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>数据列表</legend>
        <div class="layui-field-box">
            <table class="site-table table-hover">
                <thead>
                <tr>
                    <th style="width: 10px;"><input type="checkbox" id="selected-all"></th>
                    <th>学生姓名</th>
                    <th style="width: 150px;">创建时间</th>
                    <th style="width: 150px;">操作</th>
                </tr>
                </thead>
                <tbody id="data_list">
                <tr>
                    <td colspan="6">请选择合适的班级以显示数据</td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="page" class="page">
        </div>
    </div>
</div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script>
    function as_right(uid, quid, qid) {
        console.log(uid)


        var $ = layui.jquery, layer = layui.layer;
        $.post('student_answers_correct.do', {uid: uid, quid: quid, qid: qid, status: 0}, function (form) {
            $('#answers' + qid).html('<button class="layui-btn layui-btn-mini">回答正确</button>');
        });
    }

    function as_error(uid, quid, qid) {
        var $ = layui.jquery, layer = layui.layer;
        $.post('student_answers_correct.do', {uid: uid, quid: quid, qid: qid, status: 1}, function (form) {
            $('#answers' + qid).html('<button class="layui-btn layui-btn-mini" style="background-color: #FF5722;">回答错误</button>');
        });
    }

    function student_answers(id, question) {
        var $ = layui.jquery, layer = layui.layer;
        $.get('student_answers_view.do', {uid: id, qid: question}, function (form) {
            layer.open({
                type: 1,
                title: '批改',
                content: form,
                area: ['100%', '100%'],
                maxmin: false,
                yes: function (index) {

                },
                full: function (elem) {
                    var win = window.top === window.self ? window : parent.window;
                    $(win).on('resize', function () {
                        var $this = $(this);
                        elem.width($this.width()).height($this.height()).css({
                            top: 0,
                            left: 0
                        });
                        elem.children('div.layui-layer-content').height($this.height() - 95);
                    });
                }
            });
        });
    }

    function get_answers(val) {
        var $ = layui.jquery,
            laypage = layui.laypage,
            layer = parent.layer === undefined ? layui.layer : parent.layer;
        var grade_id = $("#sel_grade").val();
        var question_id = $(val).val();
        $.post("student_answers_list_count.do", {grade_id: grade_id, question_id: question_id}, function (result) {
            laypage({
                cont: 'page',
                pages: result,
                groups: 5,
                jump: function (obj, first) {
                    //得到了当前页，用于向服务端请求对应数据
                    var curr = obj.curr;
                    $.post("student_answers_list_table.do", {
                        grade_id: grade_id,
                        question_id: question_id,
                        page: curr
                    }, function (result) {
                        $("#data_list").html(result);
                    });
                }
            });
        });
    }

    function question_sel(val) {
        var $ = layui.jquery,
            laypage = layui.laypage,
            layer = parent.layer === undefined ? layui.layer : parent.layer;
        $.get("select_question_list.do", {id: $(val).val()}, function (result) {
            $("#sel_question").html(result);
        });
    }

    function get_data(page) {
        var $ = layui.jquery, layer = parent.layer === undefined ? layui.layer : parent.layer;
        $.post("question_bank_list_table.do", {page: page}, function (result) {
            $("#data_list").html(result);
        });
    }

    layui.config({
        base: 'plugins/layui/modules/'
    });
    layui.use(['icheck', 'laypage', 'layer'], function () {
        var $ = layui.jquery,
            laypage = layui.laypage,
            layer = parent.layer === undefined ? layui.layer : parent.layer;
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });


        $('.site-table tbody tr').on('click', function (event) {
            var $this = $(this);
            var $input = $this.children('td').eq(0).find('input');
            $input.on('ifChecked', function (e) {
                $this.css('background-color', '#EEEEEE');
            });
            $input.on('ifUnchecked', function (e) {
                $this.removeAttr('style');
            });
            $input.iCheck('toggle');
        }).find('input').each(function () {
            var $this = $(this);
            $this.on('ifChecked', function (e) {
                $this.parents('tr').css('background-color', '#EEEEEE');
            });
            $this.on('ifUnchecked', function (e) {
                $this.parents('tr').removeAttr('style');
            });
        });
        $('#selected-all').on('ifChanged', function (event) {
            var $input = $('.site-table tbody tr td').find('input');
            $input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
        });
    });
</script>
</body>

</html>